<template>
  <div class="bind-phone">
    <el-form
      :model="state.phoneParam"
      :rules="state.rules"
      ref="ruleForm"
      class="demo-ruleForm"
    >
      <el-form-item prop="user_phone_number" class="mb-20">
        <Selectcountry
          @selectCountry="selectCountry"
          @inputPhone="inputPhone"
        />
      </el-form-item>
      <el-form-item prop="verification_code" class="mb-20">
        <sendCode
          :fond="1"
          :param="state.phoneParam"
          @getKey="getKey"
          @inputCode="inputCode"
        />
      </el-form-item>
      <div
        class="btn radius login-btn text-16 share-color"
        @click="submitForm('ruleForm')"
      >
        {{ $t("formTip.comfirm") }}
      </div>
    </el-form>
  </div>
</template>

<script>
import sendCode from "@/components/sendCode/SendCode.vue";
import Selectcountry from "@/components/selectCountry/SelectCountry.vue";
import { nextTick, reactive, ref } from "vue";
import { updatePhone } from "@/api/user";
import { ElMessage } from "element-plus";
import { useI18n } from "vue-i18n";

export default {
  name: "bindEmail",
  components: { sendCode, Selectcountry },
  props: {
    param: Object
  },
  emits: ["bindSuccess"],
  setup(props, { emit }) {
    const { t } = useI18n();
    const state = reactive({
      phoneParam: { ...props.param, type: "bind" },
      rules: {
        user_phone_number: [
          {
            required: true,
            message: "*" + t("formTip.phoneTip"),
            trigger: "blur"
          }
        ],
        verification_code: [
          {
            required: true,
            message: "*" + t("formTip.codeTip"),
            trigger: "blur"
          }
        ]
      }
    });
    const ruleForm = ref();
    const selectCountry = param => {
      state.phoneParam = Object.assign(state.phoneParam, param);
    };
    const inputPhone = param => {
      state.phoneParam = Object.assign(state.phoneParam, param);
    };
    const inputCode = code => {
      state.phoneParam.verification_code = code;
    };
    const getKey = key => {
      state.phoneParam.key = key;
    };
    const submitForm = () => {
      ruleForm.value.validate(valid => {
        if (valid) {
          console.log("state.phoneParam", state.phoneParam);
          updatePhone(state.phoneParam).then(res => {
            console.log(res);
            if (res.code === 200) {
              ElMessage({
                type: "success",
                message: res.message
              });
              nextTick(() => {
                emit("bindSuccess", false);
              });
            }
          });
        } else {
          console.log("error submit!!", state.phoneParam);
          return false;
        }
      });
    };
    return {
      state,
      submitForm,
      ruleForm,
      selectCountry,
      inputPhone,
      inputCode,
      getKey
    };
  }
};
</script>

<style scoped lang="less">
.bind-phone {
  width: 100%;
}
.mb-20 {
  margin-bottom: 20px;
}
.mb-50 {
  margin-bottom: 50px;
}
.btn {
  height: 46px;
  line-height: 46px;
}
</style>
